<template>
    <div>
        <el-button @click="addTaskVisibleForm" style="margin-left: 1100px" type="primary" size="small">新建作业</el-button>
        <el-table
                :data="taskList"
                style="width: 100%"
        >
            <el-table-column
                    prop="taskName"
                    label="作业名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="deadlineTime"
                    label="截止时间"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="statusName"
                    label="状态"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope" >
                <el-button
                        size="mini"
                        @click="taskDetail(scope.$index, scope.row)">预览
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="taskDelete(scope.$index, scope.row)">删除
                </el-button>
                    <el-button
                            v-if="scope.row.statusId === 1"
                            type="success"
                            size="mini"
                            @click="taskSubmit(scope.$index, scope.row)">发布
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="pageChange"
                :page-size="pageSize"
                background
                layout="prev, pager, next"
                :total="total">
        </el-pagination>
        <el-dialog width="1200px" style="margin-top: -100px" title="新建作业" :visible.sync="addTaskVisible">
            <el-form style="width: 1100px;" label-position="right" :model="addTaskFormData" :rules="rules"
                     ref="addTaskFormData">
                <el-row>
                    <el-col :span=12>
                        <el-form-item label="作业名称" prop="taskName">
                            <el-input style="width: 60%;margin-left: -120px" v-model="addTaskFormData.taskName"
                                      autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=12>
                        <el-form-item label="截止时间" prop="deadlineTime">
                            <span class="demonstration"></span>
                            <el-date-picker
                                    style="margin-left: -220px"
                                    v-model="addTaskFormData.deadlineTime"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请输入截至时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=12>
                        <el-form-item label="题型选择" prop="questionType">
                            <el-checkbox-group  v-model="addTaskFormData.questionType">
                                <el-checkbox style="margin-left: -240px" v-for="item in addFormQuestionType" :key="item.value"
                                             :label="item.value">{{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span=12>
                        <el-form-item label="题目难度" prop="questionDifficulty">
                            <el-checkbox-group style="margin-left: 30px" v-model="addTaskFormData.questionDifficulty">
                                <el-checkbox v-for="item in difficultyOptions" :key="item.value"
                                             :label="item.value">{{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=10>
                        <el-form-item label="题目数量" prop="questionCount">
                            <el-select style="margin-left: -140px" placeholder="请选择" v-model="addTaskFormData.questionCount">
                                <el-option
                                        v-for="item in questionCountSelect"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="text-align: center;margin-top: 10px">
                    <el-form-item label="选择知识点" prop="sectionId">
                        <el-transfer
                                style="text-align: left; display: inline-block"
                                filterable
                                :props="transferProps"
                                :titles="['可选知识点', '已选知识点']"
                                :button-texts="['移除', '加入']"
                                v-model="addTaskFormData.sectionId" :data="sectionList"
                        >
                        </el-transfer>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button type="primary" @click="addTaskFormSubmit('addTaskFormData')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import paperDetail from "@/views/course/paperDetail";

    export default {

        name: 'course-task',
        inject: ['reload'],
        data() {
            return {
                courseId: "",
                pageSize: 10,
                total: null,
                addTaskVisible: false,
                taskList: [],
                sectionList: [],
                rules: {
                    taskName: [{required: true, message: '请输入课程名', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur'}],
                    questionDifficulty: [
                        {type: 'array', required: true, message: '请至少选择一个难度', trigger: 'change'}
                    ],
                    deadlineTime: [{ required: true, message: "请选择一个日期"}],
                    questionType: [{type: 'array', required: true, message: "请至少选择一个题型", trigger: 'change'}],
                    questionCount: [{required: true, message: "请选择题目数量", trigger: 'change'}],
                    sectionId: [{type: 'array', required: true, message: "请选择一个知识点", trigger: 'change'}]
                },
                addTaskFormData: {
                    courseId: "",
                    taskName: "",
                    deadlineTime: "",
                    questionType: [],
                    questionCount: "",
                    questionDifficulty: [],
                    sectionId: []
                },
                difficultyOptions: [
                    {
                        value: 1,
                        label: "非常简单"
                    },
                    {
                        value: 2,
                        label: "简单"
                    },
                    {
                        value: 3,
                        label: "中等"
                    },
                    {
                        value: 4,
                        label: "困难"
                    },
                    {
                        value: 5,
                        label: "非常困难"
                    }
                ],
                questionCountSelect: [
                    {
                        value: 10,
                        label: "10道"
                    },
                    {
                        value: 20,
                        label: "20道"
                    }
                ],
                addFormQuestionType: [
                    {
                        value: 1,
                        label: "选择题"
                    },
                    {
                        value: 2,
                        label: "判断题"
                    }
                ],
                transferProps: {
                    key: "id",
                    label: "title"
                }
            }
        },
        created() {
            this.getParams();

            this.axios.get(this.urls.getCourseTaskList + this.courseId + "/1")
                .then((res) => {
                    this.total = res.data.data.total;
                    this.taskList = res.data.data.data;
                })
        },
        methods: {
            getParams() {
                this.courseId = this.$route.query.courseId;
            },
            addTaskVisibleForm() {
                this.addTaskVisible = true;
                this.axios.get(this.urls.getCourseSectionList + this.courseId)
                    .then((res) => {
                        this.sectionList = res.data.data;
                    })
            },
            addTaskFormSubmit(formName) {

                this.$refs[formName].validate((valid)=> {
                    if(valid){
                        this.addTaskFormData.courseId = this.courseId;
                        this.axios.post(this.urls.addCourseTask, this.addTaskFormData)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("添加成功")
                                    this.addTaskVisible = false;
                                    this.reload();
                                } else {
                                    this.$message.error(res.data.message);
                                }
                            })
                    }else{
                        return false;
                    }
                })

            },
            pageChange(currentPage) {
                this.axios.get(this.urls.getCourseTaskList + this.courseId + "/" + currentPage)
                    .then((res) => {
                        this.total = res.data.data.total;
                        this.taskList = res.data.data.data;
                    })
            },
            taskDetail(index,row){
                this.$router.push({
                    name: paperDetail,
                    query:{
                        taskId:row.id,
                        courseId:row.courseId
                    }
                })
            },
            taskDelete(index,row){

                this.$confirm("确定要删除这次作业吗？", "删除", {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.axios.get(this.urls.deleteTask+row.id)
                    .then((res)=>{
                        if(res.data.code === 200) {
                            this.reload()
                        }
                    })
                })
            },
            taskSubmit(index,row){

                this.$confirm("在发布前请预览作业确认无误，是否确认发布？", "发布", {
                    confirmButtonText: '发布',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.axios.get(this.urls.submitTask+row.id)
                        .then((res)=>{
                            if(res.data.code === 200) {
                                this.reload()
                            }
                        })
                })
            },
            }
    }
</script>

<style>

</style>